import React, { FC, useCallback } from 'react';
import './QuestionCard.css';
import styles from './QuestionCard.module.css';
import classNames from 'classnames';
type PropsType = {
  id: string;
  title: string;
  isPublished: boolean;
  deleteQuestion?: (id: string) => void;
  publicQuestion?: (id: string, flag: boolean) => void;
};

const QuestionCard: FC<PropsType> = ({
  id,
  title,
  isPublished,
  deleteQuestion: deleteQuestionForProps = () => {},
  publicQuestion: publicQuestionForProps = () => {},
}) => {
  // const edit = useCallback((id: string) => {
  //   console.log('edit ', id);
  // }, []);
  const deleteQuestion = useCallback(
    (id: string) => {
      console.log('deleteQuestion ', id);
      deleteQuestionForProps(id);
    },
    [deleteQuestionForProps]
  );
  const publicQuestion = useCallback(
    (id: string) => {
      console.log('publicQuestion ', id);
      publicQuestionForProps(id, !isPublished);
    },
    [isPublished, publicQuestionForProps]
  );
  // const itemClass = `list-item ${isPublished ? 'border' : ''}`
  // 或者使用classNames库
  const itemClass = classNames(styles['list-item'], {
    [styles.border]: isPublished,
  });
  return (
    <div key={id} className={itemClass}>
      <strong>{title}</strong>
      &nbsp;
      {/* 条件判断 */}
      {isPublished ? (
        <span style={{ color: 'green' }}>已发布</span>
      ) : (
        <span style={{ color: 'red' }}>未发布</span>
      )}
      &nbsp;
      <button onClick={() => publicQuestion(id)}>
        {isPublished ? '取消发布' : '发布'}问卷
      </button>
      <button onClick={() => deleteQuestion(id)}>删除问卷</button>
    </div>
  );
};

export default QuestionCard;
